﻿<script type="text/javascript" src="/js/echarts.min.js"></script>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm4">
            <div class="layui-row">
                <div class="layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-header">设备运维与计划</div>
                        <div class="layui-card-body">
                            <table id="planTable" class="layui-table layuiadmin-page-table" lay-skin="line"></table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row" style="    margin-top: 10px;">
                <div class="layui-col-sm12">
                    <div class="layui-card">
                        <div class="layui-card-header">异常设备</div>
                        <div class="layui-card-body">
                            <table id="badDevice" class="layui-table layuiadmin-page-table" lay-skin="line"></table>
                        </div>
                    </div>
                </div>


            </div>
        </div>


        <div class="layui-col-sm8">
            <div class="layui-card">
                <div class="layui-card-header">
                    设备状态统计
                </div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div id="chart1" style="height:150px" class="layui-col-sm3"></div>
                        <div id="chart2" style="height:150px" class="layui-col-sm3"></div>
                        <div id="chart3" style="height:150px" class="layui-col-sm3"></div>
                        <div id="chart4" style="height:150px" class="layui-col-sm3"></div>
                    </div>
                    <div class="layui-row">
                        <div id="chart5" style="height:365px" class="layui-col-sm12"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

    <script>



            var table = layui.table;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart1'));
            var myChart2 = echarts.init(document.getElementById('chart2'));
            var myChart3 = echarts.init(document.getElementById('chart3'));
            var myChart4 = echarts.init(document.getElementById('chart4'));
            var myChart5 = echarts.init(document.getElementById('chart5'));

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    show:false
                },
                series: [
                    {
                        name: '设备状态',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            { value: 335, name: '维修中' },
                            { value: 310, name: '已报废' },
                            { value: 234, name: '正常' },
                            { value: 135, name: '维护中' }
                        ]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart2.setOption(option);
            myChart3.setOption(option);
            myChart4.setOption(option);

            var option2 = {
                color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                legend: {
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },

                toolbox: {
                    show: false,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['机房1', '机房2', '机房3', '机房4', '机房5']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Forest',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        data: [320, 332, 301, 334, 390]
                    },
                    {
                        name: 'Steppe',
                        type: 'bar',
                        label: labelOption,
                        data: [220, 182, 191, 234, 290]
                    },
                    {
                        name: 'Desert',
                        type: 'bar',
                        label: labelOption,
                        data: [150, 232, 201, 154, 190]
                    },
                    {
                        name: 'Wetland',
                        type: 'bar',
                        label: labelOption,
                        data: [98, 77, 101, 99, 40]
                    }
                ]
            };

            var posList = [
                'left', 'right', 'top', 'bottom',
                'inside',
                'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
            ];
            var app = {};
            app.configParameters = {
                rotate: {
                    min: -90,
                    max: 90
                },
                align: {
                    options: {
                        left: 'left',
                        center: 'center',
                        right: 'right'
                    }
                },
                verticalAlign: {
                    options: {
                        top: 'top',
                        middle: 'middle',
                        bottom: 'bottom'
                    }
                },
                position: {
                    options: echarts.util.reduce(posList, function (map, pos) {
                        map[pos] = pos;
                        return map;
                    }, {})
                },
                distance: {
                    min: 0,
                    max: 100
                }
            };

            app.config = {
                rotate: 90,
                align: 'left',
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 15,
                onChange: function () {
                    var labelOption = {
                        normal: {
                            rotate: app.config.rotate,
                            align: app.config.align,
                            verticalAlign: app.config.verticalAlign,
                            position: app.config.position,
                            distance: app.config.distance
                        }
                    };
                    myChart.setOption({
                        series: [{
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }]
                    });
                }
            };


            var labelOption = {

                normal: {
                    show: true,
                    position: app.config.position,
                    distance: app.config.distance,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    rotate: app.config.rotate,
                    formatter: '{c}  {name|{a}}',
                    fontSize: 16,
                    rich: {
                        name: {
                            textBorderColor: '#fff'
                        }
                    }
                }
            };

            myChart5.setOption(option2);

            var tableObj = table.render({
                elem: '#planTable'
                , url: '/home/GetDevicePlan'
                , page: false
                , height: '210px'
                , cols: [[
                    { field: 'name', title: '计划名称', minWidth: 140, templet: '<div>{{ d.name}}</div>' }

                    , { field: 'startDate', title: '开始时间', width: 90, templet: '<div>{{ getDate(d.startTime)}}</div>' }
                    , { field: 'startDate', title: '结束时间', width: 90, templet: '<div>{{ getDate(d.endTime) }}</div>' }
                ]]
                , skin: 'line'
            });

            table.render({
                elem: '#badDevice'
                , url: '/home/GetBadDeviceList'
                , page: false
                , height: '210'
                , cols: [[
                    { field: 'name', title: '设备名称', minWidth: 130, templet: '<div>{{ d.name}}</div>' }

                    , { field: 'startDate', title: '型号', width: 100, templet: '<div>{{ d.model }}</div>' }
                    , { field: 'startDate', title: '所在机房', width: 90, templet: '<div>{{ d.room.name }}</div>' }
                ]]
                , skin: 'line'
            });



    </script>

